<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phoenix-chat</title>
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="app" class="box">
	<div class="wechat">
		<div class="sidestrip">
			<div class="am-dropdown" data-am-dropdown>
				<!--头像插件-->
				<div class="am-dropdown-toggle">
					<img :src="'images/head/' + base_user_info.head_img + '.jpg'" alt="" class="own_head"/>
				</div>
				<div class="am-dropdown-content">
					<div class="own_head_top">
						<div class="own_head_top_text">
							<p class="own_name">{{base_user_info.nick_name}}<img :src="'images/icon/head'+base_user_info.sex+'.png'" alt="" /></p>
							<p class="own_numb">用户名：{{base_user_info.username}}</p>
						</div>
						<img :src="'images/head/' + base_user_info.head_img + '.jpg'" alt="" />
					</div>
					<div class="own_head_bottom">
						<p><span>地区</span>{{base_user_info.address}}</p>
						<div class="own_head_bottom_img">
							<a href=""><img src="images/icon/head_1.png"/></a>
							<a href=""><img src="images/icon/head_2.png"/></a>
						</div>
					</div>
				</div>
			</div>
			<!--三图标-->
			<div class="sidestrip_icon">
				<a :class="page_tab==1?'si_1_1':'si_1'" @click="changeTab(1)"></a>
				<a :class="page_tab==2?'si_2_1':'si_2'" @click="changeTab(2)"></a>
				<a :class="page_tab==3?'si_3_1':'si_3'" @click="changeTab(3)"></a>
			</div>
			
			<!--底部扩展键-->
			<div id="doc-dropdown-justify-js">
				<div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
					<div class="sidestrip_bc am-dropdown-toggle"></div>
					<ul class="am-dropdown-content" style="">
						<li>
							<a href="#" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
							<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
							  <div class="am-modal-dialog">
								<div class="am-modal-hd">Modal 标题
								  <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
								</div>
								<div class="am-modal-bd">
								  Modal 内容。本 Modal 无法通过遮罩层关闭。
								</div>
							  </div>
							</div>
						</li>
						
						<li><a href="#">备份与恢复</a></li>
						<li><a href="#">设置</a></li>
					</ul>
				</div>	
			</div>	
		</div>
		<div class="chat-body" v-show="page_tab == 1">
			<!--聊天列表-->
			<div class="middle on">
				<div class="wx_search">
					<input type="text" placeholder="搜索"/>
					<button>+</button>
				</div>
				<div class="office_text">
					<vue-scroll :ops="ops">
						<ul class="user_list">
							<li v-for="d in g_msg_list.values()" @click="showDialogueInfo(d.id)" :class="d.is_active?'user_active':''">
								<div class="user_head">
									<img :src="'images/' + (d.type=='u'?'head/':'group/') + d.avatar + '.jpg'"/>
								</div>
								<div class="user_text">
									<p class="user_name">{{d.nick_name}}</p>
									<p class="user_message">{{d.quick_msg}}</p>
								</div>
								<div class="user_time">
									<p>{{d.show_time}}</p>
									<p class="message_hasnew" v-if="d.hasnew">●</p>
								</div>
								
							</li>
						</ul>
					</vue-scroll>
				</div>	
			</div>
			<!--聊天窗口-->
			<div class="talk_window">
				<div class="windows_top">
					<div class="windows_top_box">
						<span>{{cur_dialogue.nick_name}}</span>
						<ul class="window_icon">
							<li><a href=""><img src="images/icon/icon7.png"/></a></li>
							<li><a href=""><img src="images/icon/icon8.png"/></a></li>
							<li><a href=""><img src="images/icon/icon9.png"/></a></li>
							<li><a href=""><img src="images/icon/icon10.png"/></a></li>
						</ul>
						<div class="extend" class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
						<!-- 侧边栏内容 -->
						<div id="doc-oc-demo3" class="am-offcanvas">
							<div class="am-offcanvas-bar am-offcanvas-bar-flip">
								<div class="am-offcanvas-content">
									<p><a href="http://phoenix.sunny360.cn/" target="_blank">phoenix-im</a></p>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!--聊天内容-->
				<div class="windows_body">
					<div class="office_text" style="height: 100%;">
						<vue-scroll :ops="ops" ref="msg_list">
							<ul v-if="cur_dialogue.msg_list" class="content" id="chatbox">
								<li v-for="msg in cur_dialogue.msg_list.getAll()" :class="{me:msg.from==base_user_info.user_id,other:msg.from!=base_user_info.user_id}">
									<img :src="'images/head/' + msg.avatar + '.jpg'" :title="msg.nick_name" :alt="msg.nick_name">
									<span>{{msg.content}}</span>
								</li>
							</ul>
						</vue-scroll>
					</div>
				</div>
				
				<div class="windows_input" id="talkbox">
					<div class="input_icon">
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
					</div>
					<div class="input_box">
						<textarea id="input_box" ref="msg_content" placeholder="Press Enter to send" v-model="message" @keyup.enter="sendMessage()">
						</textarea>
						<button id="send" @click="sendMessage()">发送（S）</button>
					</div>
				</div>
			</div>
		</div>		
		<div class="chat-body" v-show="page_tab == 2">
			<!--好友列表-->
			<div class="middle">
				<div class="wx_search">
					<input type="text" placeholder="搜索"/>
					<button>+</button>
				</div>
				<div class="office_text">
					<vue-scroll :ops="ops">
						<ul class="friends_list">
							<li>
								<p>新的朋友</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/icon/new-friend.png"/></div>
									<div class="friends_text">
										<p class="user_name">新的朋友</p>
									</div>
								</div>
							</li>
							<li>
								<p>群</p>
								<div v-for="g in g_group_list.values()" @click="showGroupInfo(g.group_id)" class="friends_box">
									<div class="user_head"><img :src="'images/group/'+g.logo+'.jpg'"/></div>
									<div class="friends_text">
										<p class="user_name">{{g.group_name}}</p>
									</div>
								</div>
							</li>
							<li>
								<p>好友</p>
								<div v-for="u in g_link_list.values()" @click="showUserInfo(u.linkman_id)" class="friends_box">
									<div class="user_head"><img :src="'images/head/'+u.avatar+'.jpg'"/></div>
									<div class="friends_text">
										<p class="user_name">{{u.show_name}}</p>
									</div>
								</div>
							</li>
						</ul>
					</vue-scroll>
				</div>	
			</div>
			<div class="talk_window">
				<div class="windows_top">
					<div class="windows_top_box">
						<span>{{linkman_page_title}}</span>
						<ul class="window_icon">
							<li><a href=""><img src="images/icon/icon7.png"/></a></li>
							<li><a href=""><img src="images/icon/icon8.png"/></a></li>
							<li><a href=""><img src="images/icon/icon9.png"/></a></li>
							<li><a href=""><img src="images/icon/icon10.png"/></a></li>
						</ul>
					</div>
				</div>
				
				<div class="windows_body">
					<div style="height: 100%;">
						
						<!--好友信息-->
						<div v-if="linkpage_content_type == 1" class="link_man">
							<p class="am-g own_numb">
								<span class="am-u-sm-2">&nbsp;</span>
								<span class="am-u-sm-2">昵　称：</span>
								<span class="am-u-sm-8">{{cur_linkman.nick_name}}</span>
							</p>
							<p class="am-g own_numb">
								<span class="am-u-sm-2">&nbsp;</span>
								<span class="am-u-sm-2">头　像：</span>
								<span class="am-u-sm-8"><img :src="'images/head/'+cur_linkman.avatar+'.jpg'" style="height: 40px;width: 40px;"/></span>
							</p>
							<p class="am-g own_numb">
								<span class="am-u-sm-2">&nbsp;</span>
								<span class="am-u-sm-2">性　别：</span>
								<span class="am-u-sm-8">
									<img :src="'images/icon/head'+cur_linkman.sex+'.png'" alt="" />
								</span>
							</p>
							<p class="am-g own_numb">
								<span class="am-u-sm-2">&nbsp;</span>
								<span class="am-u-sm-2">备　注：</span>
								<span class="am-u-sm-6">{{cur_linkman.linkman_alias}}</span>
								<span class="am-u-sm-2">
									<button class="am-btn am-btn-success am-btn-xs">修改</button>
								</span>
							</p>
							<p class="am-g own_numb">
								<span class="am-u-sm-2">&nbsp;</span>
								<span class="am-u-sm-2">用户名：</span>
								<span class="am-u-sm-8">{{cur_linkman.username}}</span>
							</p>
							<hr class="am-divider am-divider-default" />
							<p class="am-g">
								<span class="am-u-sm-12" style="text-align: center;">
									<button type="button" @click="chatToLinkMan(cur_linkman.linkman_id)" class="am-btn am-btn-success">发消息</button>
								</span>
							</p>
						</div>
						<!-- 群信息 -->
						<div v-if="linkpage_content_type == 2" class="group" style="height: 100%">
							<div class="office_text" style="margin-top: 30px;">
								<vue-scroll :ops="ops">
									<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4" style="width: 100%;">
										<li v-for="m in cur_group.members.value" class="link_man_li" style="display: flex;">
											<div class="link_man_head am-thumbnail" style="margin-bottom: 0px;" style="margin-bottom: 0px;">
												<img :src="'images/head/'+m.head_img+'.jpg'"/>
											</div>
											<p style="padding: 0px;margin-top: 0px;">{{m.nick_name}}</p>
										</li>
									</ul>
								</vue-scroll>
							</div>
							<p class="am-g">
								<span class="am-u-sm-12" style="text-align: center;">
									<button type="button" @click="chatToGroup(cur_group.group_id)" class="am-btn am-btn-success">发消息</button>
								</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="chat-body" v-show="page_tab == 3">
			<!--程序列表-->
			<div class="middle">
				<div class="wx_search">
					<input type="text" placeholder="搜索收藏内容"/>
					<button>+</button>
				</div>
				<div class="office_text">
					<vue-scroll :ops="ops">
						<ul class="icon_list">
							<li class="icon_active">
								<div class="icon"><img src="images/icon/icon.png" alt="" /></div>
								<span>全部收藏</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon1.png" alt="" /></div>
								<span>链接</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon2.png" alt="" /></div>
								<span>相册</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon3.png" alt="" /></div>
								<span>笔记</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon4.png" alt="" /></div>
								<span>文件</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon5.png" alt="" /></div>
								<span>音乐</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon6.png" alt="" /></div>
								<span>标签</span>
							</li>
						</ul>
					</vue-scroll>
				</div>	
			</div>
			<div class="talk_window">
				<div class="windows_top">
					<div class="windows_top_box">
						<span>全部收藏</span>
						<ul class="window_icon">
							<li><a href=""><img src="images/icon/icon7.png"/></a></li>
							<li><a href=""><img src="images/icon/icon8.png"/></a></li>
							<li><a href=""><img src="images/icon/icon9.png"/></a></li>
							<li><a href=""><img src="images/icon/icon10.png"/></a></li>
						</ul>
					</div>
				</div>
				
				<!--聊天内容-->
				<div class="windows_body">
					<div class="office_text" style="height: 100%;">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="h-dialogs">
		<div class="am-modal am-modal-loading am-modal-no-btn box" tabindex="-1" id="dialog-login">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">您还没有登录哦，请您先登录再聊天~~</div>
				<div class="am-modal-bd">
					<form class="am-form am-form-horizontal">
						<div class="am-form-group">
						  <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">用户名</label>
						  <div class="am-u-sm-10">
							<input type="text" v-model="d_username" placeholder="输入你的用户名">
						  </div>
						</div>
						
						<div class="am-form-group">
						  <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">密码</label>
						  <div class="am-u-sm-10">
							<input type="password" v-model="d_password" placeholder="输入你的密码">
						  </div>
						</div>
						<div class="am-form-group">
						  <div class="am-u-sm-12">
							<input type="button" class="am-btn am-btn-primary" value="登录" @click="dologin()"/>
						  </div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/vuescroll-native.js"></script>
<script type="text/javascript" src="js/wechat.js"></script>
</body>
</html>
